<!--
 * @Autor: Ruohong Yu
 * @Date: 2022-09-11 17:26:06
 * @Description: file content
 * @FilePath: \ebook\src\components\home\SearchBar.vue
-->
<template>
  <div>
    <div class="search-bar" :class="{'hide-title':!titleVisible,'hide-shadow':!shadowVisible}">
      <transition name="title-move">
        <div class="search-bar-title-wrapper" v-show="titleVisible">
          <div class="title-text-wrapper">
            <span class="title-text title">{{$t('home.title')}}</span>
          </div>
          <div class="title-icon-shake-wrapper" @click="showFlapCard">
            <span class="icon-shake icon"></span>
          </div>
        </div>
      </transition>
      <div class="title-icon-back-wrapper" @click="back" :class="{'hide-title':!titleVisible}">
        <span class="icon-back icon"></span>
      </div>
      <div class="search-bar-input-wrapper" :class="{'hide-title':!titleVisible}">
        <div class="search-bar-blank" :class="{'hide-title':!titleVisible}"></div>
        <div class="search-bar-input">
          <span class="icon-search icon"></span>
          <input type="text" class="input" :placeholder="$t('home.hint')" v-model="searchText" @click="showHotSearch" @keyup.enter.exact="search">
        </div>
      </div>
    </div>
    <hot-search-list v-show="hotSearchVisible" ref="hotSearch"></hot-search-list>
  </div>
</template>

<script>
import { storeHomeMixin } from '../../utils/mixin'
import HotSearchList from './HotSearchList.vue'

export default {
  mixins: [storeHomeMixin],
  components: {
    HotSearchList
  },
  data () {
    return {
      searchText: '',
      titleVisible: true,
      shadowVisible: false,
      hotSearchVisible: false
    }
  },
  watch: {
    offsetY (offsetY) {
      if (offsetY > 0) {
        this.hideTitle()
        this.showShadow()
      } else {
        this.showTitle()
        this.hideShadow()
      }
    },
    hotSearchOffsetY (offsetY) {
      if (offsetY > 0) {
        this.showShadow()
      } else {
        this.hideShadow()
      }
    }
  },
  methods: {
    // 在storelist页面使用filter过滤器搜索
    search () {
      this.$router.push({
        path: '/store/list',
        query: {
          keyword: this.searchText
        }
      })
      let list = this.historySearchList
      if (this.searchText !== '') {
        if (list === null || list === undefined) {
          list = [{ type: 2, text: this.searchText }]
        } else {
          list.unshift({
            type: 2,
            text: this.searchText
          })
        }
        this.setHistorySearchList(list)
      }
    },
    showFlapCard () {
      this.setFlapCardVisible(true)
    },
    back () {
      if (this.offsetY > 0) {
        this.showShadow()
      } else {
        this.hideShadow()
      }
      if (this.hotSearchVisible) {
        this.hideHotSearch()
      } else {
        try {
          this.$router.push({
            path: '/store/shelf'
          })
        } catch (err) {
          console.log(err)
        }
      }
    },
    hideHotSearch () {
      this.hotSearchVisible = false
      if (this.offsetY > 0) {
        this.hideTitle()
        this.showShadow()
      } else {
        this.showTitle()
        this.hideShadow()
      }
    },
    showHotSearch () {
      this.hideTitle()
      this.hideShadow()
      this.hotSearchVisible = true
      this.$nextTick(() => {
        this.$refs.hotSearch.reset()
      })
    },
    hideTitle () {
      this.titleVisible = false
    },
    showTitle () {
      this.titleVisible = true
    },
    hideShadow () {
      this.shadowVisible = false
    },
    showShadow () {
      this.shadowVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
  .search-bar{
    position: relative;
    z-index: 150;
    width: 100%;
    height: px2rem(94);
    background-color: white;
    box-shadow: 0 px2rem(2) px2rem(2) 0 rgba(0, 0, 0, .1);
    &.hide-title{
      height: px2rem(52);
    }
    &.hide-shadow{
      box-shadow: none;
    }
    .search-bar-title-wrapper{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: px2rem(42);

      .title-text-wrapper{
        width: 100%;
        height: px2rem(42);
        @include center;
      }
      .title-icon-shake-wrapper{
        cursor: pointer;
        position: absolute;
        right: px2rem(15);
        top: 0;
        height: px2rem(42);
        @include center;
      }
    }
    .title-icon-back-wrapper{
      position: absolute;
      left: px2rem(15);
      top: 0;
      height: px2rem(42);
      z-index: 200;
      cursor: pointer;
      @include center;
      transition: height $animationTime $animationType;
      &.hide-title{
        height: px2rem(52);
      }
    }
    .search-bar-input-wrapper{
      position: absolute;
      left: 0;
      top: px2rem(42);
      display: flex;
      width: 100%;
      height: px2rem(52);
      padding: 0 px2rem(15);
      box-sizing: border-box;
      @include center;
      transition: top $animationTime $animationType;
      &.hide-title{
        top: 0;
      }
      .search-bar-blank{
        flex: 0 0 0;
        width: 0;
         transition: all $animationTime $animationType;
        &.hide-title{
          flex: 0 0 px2rem(31);
          width: px2rem(31);
        }
      }
      .search-bar-input{
        width: 100%;
        //height: px2rem(32);
        background-color: #f4f4f4;
        border-radius: px2rem(20);
        border: px2rem(1) solid #eee;
        padding: 0 px2rem(15);
        box-sizing: border-box;
        @include left;
        .icon-search{
          color: #999;
        }
        .input{
          width: 100%;
          height: px2rem(22);
          border: none;
          background-color: transparent;
          margin-left: px2rem(10);
          font-size: px2rem(14);
          color: #666;
          &:focus{
            outline: none;
          }
          &::-webkit-input-placeholder{
            color: #ccc;
          }
        }
      }
    }
  }
</style>
